<template>
  <div class="add">
    <a-modal v-model:visible="visible" title="定义新工单" @ok="onOk" :destroyOnClose="true" okText="创建并制定流程">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="工单类型" v-bind="validateInfos.worksheetType">
          <a-select v-model:value="form.state.worksheetType" placeholder="请选择类型" :options="worksheetTypeOptions" />
        </a-form-item>
        <a-form-item label="适用范围" v-bind="validateInfos.applicationScope">
          <a-checkbox-group v-model:value="form.state.applicationScope" :options="plainOptions" />
        </a-form-item>
        <a-form-item label="业务范围" v-bind="validateInfos.businessScope">
          <a-input v-model:value="form.state.businessScope" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="工单说明" v-bind="validateInfos.description">
          <a-textarea v-model:value="form.state.description" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }" maxlength="200" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import type { SelectProps } from 'ant-design-vue'
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestGetBusinessDic, requestSaveWorksheet } from '/@/api/business/worksheet'
  import { ApplicationScopeDesc } from '/@/api/business/worksheet/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  const props = defineProps({
    visible: { type: Boolean, default: false },
  })
  /** 类型选项 */
  // const worksheetTypeOptions = ref<SelectProps['options']>(Object.entries(WorksheetTypeDesc).map((item) => ({ label: item[1], value: parseInt(item[0]) })))
  const worksheetTypeOptions = ref([])
  const emits = defineEmits(['update:visible', 'success'])
  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })
  const plainOptions = ref<SelectProps['options']>(Object.entries(ApplicationScopeDesc).map((item) => ({ label: item[1], value: parseInt(item[0]) })))
  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        initData()
      }
    },
  )
  const getBusinessDic = async () => {
    const { responseCode, responseData } = await requestGetBusinessDic({ code: 'ws_type' })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      worksheetTypeOptions.value = responseData.map((item) => ({ label: item.describe, value: item.value }))
    }
  }

  const initData = () => {
    getBusinessDic()
    resetFields()
  }

  /** 表单配置 */
  const form = reactive({
    state: {
      worksheetType: null,
      applicationScope: [],
      businessScope: '',
      description: '',
    },
    rule: {
      worksheetType: [{ required: true, message: '请选择工单类型' }],
      applicationScope: [{ required: true, message: '请选择适用范围' }],
      description: [{ required: true, message: '请输入工单说明' }],
      businessScope: [{ required: true, message: '请输入业务范围' }],
    },
    searchSuccess: false,
    onUserPhoneSearch: () => validate('userPhone'),
  })
  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)

  /**
   * 确定
   */
  const onOk = () => {
    validate()
      .then(async () => {
        const { worksheetType, applicationScope, description, businessScope } = form.state
        let scopeString = ''
        applicationScope.forEach((item, index) => {
          scopeString += `${index !== 0 ? ',' : ''}${item}`
        })
        const { responseCode } = await requestSaveWorksheet({
          worksheetType,
          applicationScope: scopeString,
          description,
          businessScope,
        })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('添加成功')
          visible.value = false
          emits('success')
        }
      })
      .catch(() => {})
  }
</script>

<style lang="less" scoped></style>
